// 创建样式元素
const style = document.createElement('style');
style.textContent = `
    .back-button {
        padding: 12px 24px;
        background: #4a6cf7;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
    }

    .back-button:hover {
        background: #3a5bd7;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .back-button:active {
        transform: translateY(1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .back-button i {
        margin-right: 8px;
    }
`;
document.head.appendChild(style);

gameInfo = {
    roomId: null,
    thisUserId: null,
    thatUserId: null,
    isWhite: true,
}

//////////////////////////////////////////////////
// 设定界面显示相关操作
//////////////////////////////////////////////////

function setScreenText(me) {
    let screen = document.querySelector('#screen');
    if (me) {
        screen.innerHTML = "轮到你落子了!";
    } else {
        screen.innerHTML = "轮到对方落子了!";
    }
}

//////////////////////////////////////////////////
// 初始化 websocket
//////////////////////////////////////////////////
// TODO

let websocketUrl = 'ws://'+ location.host +'/game'
let websocket = new WebSocket(websocketUrl);

websocket.onopen = function() {
    console.log("连接游戏房间成功"); 
}

websocket.onclose = function() {
    console.log("和游戏服务器房间断开连接");
}

websocket.onerror = function() {
    console.log("和服务器连接出现异常");
}

window.onbeforeunload = function(){
    websocket.close();
}

//处理服务器响应的数据
websocket.onmessage = function(event) {
    console.log("[handlerGameBody]" + event.data);
    let resp = JSON.parse(event.data);

    if(!resp.ok){
        alert("游戏连接失败  reason:" + resp.reason);
        location.replace("game_hall.html") ;
        return;
    }

    if(resp.message == 'gameReady' ) {
        //连接成功，展示用户信息
        gameInfo.roomId = resp.roomId;
        gameInfo.thisUserId = resp.thisUserId;
        gameInfo.thatUserId = resp.thatUserId;
        gameInfo.isWhite = (resp.whiteUser == resp.thisUserId);

        //展示对手信息
        let infoDiv = document.querySelector("#info");
        infoDiv.innerHTML = '当前对手为：'+ resp.thatUserName;

        //初始化棋盘
        initGame();
        //设置显示区域内容
        setScreenText(gameInfo.isWhite);

    }else if(resp.message == 'repeatLogin') {
        alert("检测到游戏多开，请重新登录")
        location.href = "login.html";
    }else {
        console.log(resp.message);
        console.log("响应类型错误");
        return;
    }

    
}

//////////////////////////////////////////////////
// 初始化一局游戏
//////////////////////////////////////////////////
function initGame() {
    // 是我下还是对方下. 根据服务器分配的先后手情况决定
    let me = gameInfo.isWhite;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表示棋盘的数组)
    for (let i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (let j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    let chess = document.querySelector('#chess');
    let context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    // 背景图片
    let logo = new Image();
    logo.src = "image/sky.jpg";
    logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450);
        initChessBoard();
    }

    // 绘制棋盘网格
    function initChessBoard() {
        for (let i = 0; i < 15; i++) {
            context.moveTo(15 + i * 30, 15);
            context.lineTo(15 + i * 30, 430);
            context.stroke();
            context.moveTo(15, 15 + i * 30);
            context.lineTo(435, 15 + i * 30);
            context.stroke();
        }
    }

    // 绘制一个棋子, me 为 true
    function oneStep(i, j, isWhite) {
        context.beginPath();
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
        context.closePath();
        var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
        if (!isWhite) {
            gradient.addColorStop(0, "#0A0A0A");
            gradient.addColorStop(1, "#636766");
        } else {
            gradient.addColorStop(0, "#D1D1D1");
            gradient.addColorStop(1, "#F9F9F9");
        }
        context.fillStyle = gradient;
        context.fill();
    }

    chess.onclick = function (e) {
        if (over) {
            return;
        }
        if (!me) {
            return;
        }
        let x = e.offsetX;
        let y = e.offsetY;
        // 注意, 横坐标是列, 纵坐标是行
        let col = Math.floor(x / 30);
        let row = Math.floor(y / 30);
        if (chessBoard[row][col] == 0) {
            // 发送坐标给服务器, 服务器要返回结果
            send(row,col);
/*          oneStep(col, row, gameInfo.isWhite);
            chessBoard[row][col] = 1; */
        }
    }

    function send(row,col){
        let req = {
            message : 'putChess',
            userId : gameInfo.thisUserId,
            row : row,
            col : col
        };
        websocket.send(JSON.stringify(req));
    }

    websocket.onmessage = function(event) {
        console.log("[handlerPutChess]" + event.data);

        let resp = JSON.parse(event.data)
        if(resp.message != 'putChess') {
            console.log("响应类型错误");
            return;
        }

        if (resp.userId == gameInfo.thisUserId) {
            //根据自己的颜色绘制一个棋子
            oneStep(resp.col, resp.row, gameInfo.isWhite);

        } else if (resp.userId == gameInfo.thatUserId) {
            oneStep(resp.col, resp.row, !gameInfo.isWhite);

        } else {
            console.log("[handlerPutChess] resp userId错误" + resp.userId);
            return;
        }

        //给对应位置修改为1
        chessBoard[resp.row][resp.col] = 1;

        //交换双方的落子伦茨
        me = !me;
        setScreenText(me);

        //判定是否结束
        let screenDiv = document.querySelector('#screen');
        if(resp.winner != 0) {
            if(resp.winner == gameInfo.thisUserId) {
                //alert("你赢了！");
                screenDiv.innerHTML = '你赢了';
            }else if(resp.winner == gameInfo.thatUserId) {
                //alert("你输了！");
                screenDiv.innerHTML = '你输了';
            }else {
                alert("winner 字段错误 " + resp.winner);    
            }
            //回到游戏大厅
            //location.href = "game_hall.html";


            
            //增加一个按钮，点击回到大厅
            let backButton = document.createElement('button');
            
            backButton.className = 'back-button';
            backButton.innerHTML = '<i class="fa fa-arrow-left"></i> 回到大厅';

            let fatherDiv = document.querySelector('.container>div');
            fatherDiv.appendChild(backButton);

            backButton.onclick = function () {
                //location.href = "game_hall.html";
                location.replace("game_hall.html")
            }
        }
    }
}

